<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	select{
		width: 100px;
		height: 150px;
	}
</style>
</head>
<body>
	<div>
		<select name="lady" id="left" multiple="multiple">
			<option value="朱玲玲">朱玲玲</option>
			<option value="李嘉欣">李嘉欣</option>
			<option value="赵雅芝">赵雅芝</option>
			<option value="张曼玉">张曼玉</option>
		</select>
		<button>&gt;</button>
		<button>&gt;&gt;</button>
		<button>&lt;</button>
		<button>&lt;&lt;</button>
		<select name="beauty" id="right" multiple="multiple">
			
		</select>
	</div>
</body>
<script>

	var left = document.querySelector("#left");
	var right = document.querySelector("#right");
	var btn = document.querySelectorAll("button");
	
	

		btn[0].onclick = function(){

		var opt = left.querySelectorAll("option");

		for(var i = opt.length-1;i>=0;i--){

				if(opt[i].selected == true){

					opt[i].selected = false;

					// console.log(left.opt[i]);

					right.appendChild(opt[i]);

				}
			}
		}

		btn[2].onclick = function(){

			var opt = right.querySelectorAll("option");

			for(var i = opt.length-1;i>=0;i--){

			if(opt[i].selected == true){

				opt[i].selected = false;

				left.appendChild(opt[i]);

			}
		}
	}

	btn[1].onclick = function(){

		right.innerHTML = left.innerHTML;
		left.innerHTML="";

	}

	btn[3].onclick = function(){

		left.innerHTML = right.innerHTML;

		right.innerHTML="";
	}

</script>
</html>